<script setup lang="ts">
import { fetchAreaAchievementsApi } from '@/api/MicroScene/MicroSceneApi';
import { onMounted, ref, watch } from 'vue';
import type { AreaAchievement } from '@/types/micro-scene';
import AchievementCreateModal from '@/views/MicroScene/home/components/Modal/AchievementCreateModal.vue';
import { Empty } from 'ant-design-vue';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
const props = defineProps<{
  areaId: string;
}>();

const achievementFilters = ref<string[]>([]);
const selectedFilter = ref<string>('全部');
const areaId = ref<number>(Number(props.areaId));
const query = ref<string>('');
const pageIndex = ref<number>(1);
const pageSize = 12;
const achievements = ref<AreaAchievement[]>([]); // 存储成果列表数据
const currentIndex = ref<number>(0);
const createModalOpen = ref<boolean>(false);

const onItemChange = (current: number) => {
  currentIndex.value = current;
}

const fetchAreaAchievements = async () => {
  try {
    const params = {
      areaId: areaId.value,
      keyword: query.value,
      tag: selectedFilter.value === '全部' ? '' : selectedFilter.value,
      page: pageIndex.value,
      size: pageSize,
    }

    const res = await fetchAreaAchievementsApi(params);
    achievements.value = res.records || [];
  }
  catch (error) {
    console.error('获取成果数据失败:', error);
  }
}

// 刷新数据
const refreshData = async () => {
  await fetchAreaAchievements();
}

const onFilterBtnClicked = async (filter: string) => {
  selectedFilter.value = filter;
  pageIndex.value = 1;
  await refreshData();
};

// 监听 props.areaId 的变化
watch(
  () => props.areaId,
  (newAreaId) => {
    areaId.value = Number(newAreaId);
    // 重置分页和筛选条件
    pageIndex.value = 1;
    selectedFilter.value = '全部';
    query.value = '';
    // 重新获取数据
    refreshData();
  },
);

onMounted(async () => {
  await refreshData();
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: transparent;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
      <span style="font-size: 2rem; font-weight: bold; color: rgb(34, 95,245); position: relative; width: fit-content;">
        已有成果
        <img
          src="@/assets/title_star.svg"
          alt="已有成果"
          style="width: 1.5rem; height: 1.5rem; position: absolute; right: -2rem;"
        >
      </span>

      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <!-- <a-input-search
          v-model:value="query"
          placeholder="请输入关键词搜索"
          style="width: 20rem;"
          @search="refreshData"
        /> -->
        <a-button type="primary" style="font-size: 14px; border: none;" @click="createModalOpen = true">
          发布成果
        </a-button>
      </div>
    </div>

    <a-flex style="flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0rem 0rem 0rem;">
      <a-button
        v-for="option in achievementFilters"
        :key="option"
        :type="option === selectedFilter ? 'primary' : 'default'"
        style="font-size: 14px; border: none;"
        @click="onFilterBtnClicked(option)"
      >
        {{ option }}
      </a-button>
    </a-flex>

    <div style="display: flex; flex-direction: row; gap: 0.5rem; margin-top: 1rem;">
      <template v-if="achievements.length > 0">
        <div style="width: 750px; height: 400px; background-color: transparent; border-radius: 0.5rem;">
          <a-carousel arrows :autoplay="true" :after-change="onItemChange">
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                <LeftCircleOutlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <RightCircleOutlined />
              </div>
            </template>
            <div
              v-for="item in achievements"
              :key="item.resultId"
            >
              <img
                :src="item.coverUrl"
                :alt="item.resultTitle"
                style="width: 100%; height: 400px; object-fit: cover; border-radius: 0.5rem;"
              >
            </div>
          </a-carousel>
        </div>
        <div style="height: 400px; background-color: transparent; border-radius: 0.5rem; flex: 1; display: flex; flex-direction: column;">
          <h1 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; margin-top: 0rem;">
            {{ achievements[currentIndex]?.resultTitle }}
          </h1>
          <p style="font-size: 1rem; line-height: 1.5; overflow-y: auto; flex: 1;">
            {{ achievements[currentIndex]?.introduction }}
          </p>
        </div>
      </template>
      <template v-else>
        <div style="width: 100%; display: flex; justify-content: center;">
          <a-empty
            :image="Empty.PRESENTED_IMAGE_SIMPLE"
            description="当前专区暂无成果"
            style="margin-top: 4rem;"
          />
        </div>
      </template>
    </div>

    <AchievementCreateModal
      :open="createModalOpen"
      :area-id="props.areaId"
      @change-open-state="createModalOpen = $event"
      @success="refreshData"
    />
  </a-layout>
</template>

<style lang="scss" scoped>
:deep(.slick-arrow.custom-slick-arrow) {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  color: white;
  transition: ease all 0.3s;
  opacity: 0.8;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: rgb( 34, 95,245);
  opacity: 0.5;
}
</style>
